import { FormOutlined, PlusOutlined } from '@ant-design/icons';
import { ProTable ,ProColumns} from '@ant-design/pro-components';
import { useModel } from '@umijs/max';
import { Button, Divider, Modal,  Tag } from 'antd';
import React, { useState } from 'react';
import * as XLSX from 'xlsx';
import {saveAs} from 'file-saver'
import { Image } from 'antd';


const StudentList: React.FC = ({children,}) => {

  
  const { actionRef, getHandler, qualificationEnum, classCategoryEnum } =
  useModel('Student.model', (model) => {
    return {
      actionRef: model.actionRef,
      getHandler: model.getHandler,
      qualificationEnum: model.qualificationEnum,
      classCategoryEnum:model.classCategoryEnum
    };
  });
  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([])
  const[selectedRows, setSelectedRows] = useState<API.StudentInfo[]>([])

  const exportExcel=async()=>{
    const book=XLSX.utils.book_new(); //创建一个新的工作簿
    const sheet=XLSX.utils.json_to_sheet(selectedRows); //将数据转换为工作表
    XLSX.utils.book_append_sheet(book,sheet,'学生信息');
    
    const excel=XLSX.write(book,{bookType:'xlsx',type:'array'});
    const blob=new Blob([excel],{type:'application/octet-stream'});
    saveAs(blob,'学生信息.xlsx')
  }
  

  const columns: ProColumns<API.StudentInfo>[] = [
    {
      title: '序号',
      dataIndex: 'index',
      valueType: 'indexBorder',
      align: 'center',
      width: 60,
      fixed: 'left',
    },
    {
      title: '姓名',
      dataIndex: 'stu_name',
      initialValue: '',
      fixed: 'left',
      width: 30,
    },
    {
      title: '班级',
      dataIndex: 'stu_cls_id',
      width: 60,
      valueEnum: classCategoryEnum,
    },
    {
      title: '存档图片',
      hideInSearch: true,
      // hideInTable: true,
      render: (_, record) => {
        const imageUrl = 'http://localhost:3002' + record.stu_avatar;
        return (
          <>
            <Image
              src={imageUrl}
              alt="avatar"
              style={{ width: '40px', height: 'auto', cursor: 'pointer' }}
            />
          </>
        );
      },
    },
    {
      title: '性别',
      dataIndex: 'stu_sex',
      hideInSearch: true,
      render: (_, record) => {
        return record.stu_sex === 1 ? (
          <Tag color="green">男</Tag>
        ) : (
          <Tag color="red">女</Tag>
        );
      },
    },
    {
      title: '联系电话',
      dataIndex: 'stu_phone',
      hideInSearch: true,
    },
    {
      title: '联系电话2',
      dataIndex: 'stu_phone2',
      hideInSearch: true,
    },
    {
      title: '出生日期',
      dataIndex: 'stu_born',
      hideInSearch: true,
    },
    {
      title: '学历',
      dataIndex: 'stu_qualification',
      valueEnum: qualificationEnum,
    },
    {
      title: '毕业院校',
      dataIndex: 'stu_school',
      hideInSearch: true,
    },
    {
      title: '专业',
      dataIndex: 'stu_major',
      hideInSearch: true,
    },
    {
      title: '家庭住址',
      dataIndex: 'stu_address',
      hideInSearch: true,
    },
    { title: '备注', dataIndex: 'stu_remark', hideInSearch: true },
    {
      title: 'Option',
      dataIndex: 'option',
      hideInSearch: true,
      render: (_, record) => (
        <>
          {React.cloneElement(
            children[2],
            { echoRecord: record },
            <Button>分班</Button>,
          )}
          <Divider type="vertical" />
          {React.cloneElement(
            children[3],
            { echoRecord: record },
            <Button type="primary">图片存档</Button>,
          )}
          <Divider type="vertical" />
          {React.cloneElement(
            children[1],
            { echoRecord: record },
            <Button type="primary" icon={<FormOutlined />}>
              编辑
            </Button>,
          )}
        </>
      ),
    },
  ];

  const proTableProps = {
    cardBordered: true,
    bordered: true,
    headerTitle: '学生管理',
    search: { searchText: '查询', resetText: '重置' },
    actionRef: actionRef,
    pagination: { pageSize: 10 },
    toolBarRender: () =>[
      React.cloneElement(
        children[0],
        null,
        <Button type="primary" icon={<PlusOutlined />}>
          添加
        </Button>,
      ),
      React.cloneElement(
        // children[0],
        // null,
        <Button type="primary" onClick={exportExcel}>
          批量导出
        </Button>,
      ),
    ],
    rowKey: 'stu_id',
    columns: columns,
    rowSelection: {
      // selections: [],
      onChange:(selectedRowKeys, selectedRows) => {
        setSelectedRowKeys(selectedRowKeys)
        setSelectedRows(selectedRows)
      }
    },
    request: async (params) => {
      const { current, pageSize, stu_name, stu_cls_id, stu_qualification } =params;
      const { list, total } = await getHandler({
        pageSize,
        begin: (current - 1) * pageSize,
        stu_name: '',
        stu_cls_id: 0,
        stu_qualification: stu_qualification,
      });
      return {
        data: list,
        success: true,
        total,
      };
    },
  };

  return <ProTable<API.StudentInfo> {...proTableProps} />;
};

export default StudentList;
